<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <el-switch
      v-model="isBlue"
      active-text="蓝色"
      inactive-text="绿色"
      @change="toggleTheme"
      style="margin-right: 8px;"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const isBlue = ref(true)

function applyTheme(blue) {
  document.documentElement.setAttribute('data-theme', blue ? 'blue' : 'green')
}

function toggleTheme() {
  applyTheme(isBlue.value)
  localStorage.setItem('theme', isBlue.value ? 'blue' : 'green')
}

onMounted(() => {
  const saved = localStorage.getItem('theme')
  if (saved === 'green') {
    isBlue.value = false
    applyTheme(false)
  } else {
    isBlue.value = true
    applyTheme(true)
  }
})
</script>
<style>
:root[data-theme='blue'] {
  --el-bg-color: #f0f6ff;
  --el-text-color-primary: #1a237e;
  --el-menu-bg-color: #1976d2;
  --el-menu-text-color: #fff;
  --el-menu-active-color: #42a5f5;
  background: #f0f6ff;
  color: #1a237e;
  --scrollbar-thumb: #90caf9;
  --scrollbar-track: #e3f2fd;
}
:root[data-theme='green'] {
  --el-bg-color: #f3fff0;
  --el-text-color-primary: #1b5e20;
  --el-menu-bg-color: #43a047;
  --el-menu-text-color: #fff;
  --el-menu-active-color: #66bb6a;
  background: #f3fff0;
  color: #1b5e20;
  --scrollbar-thumb: #81c784;
  --scrollbar-track: #e8f5e9;
}

.el-container,
.el-header,
.el-main,
.el-aside,
.el-menu,
.el-table,
.el-dialog,
.el-card {
  background: var(--el-bg-color) !important;
  color: var(--el-text-color-primary) !important;
}
.el-menu {
  background: var(--el-menu-bg-color) !important;
  color: var(--el-menu-text-color) !important;
}
.el-menu-item,
.el-sub-menu__title {
  background: var(--el-menu-bg-color) !important;
  color: var(--el-menu-text-color) !important;
}
.el-menu-item.is-active {
  color: var(--el-menu-active-color) !important;
}
body {
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: background 0.3s, color 0.3s;
}

/* 滚动条样式适配主题 */
body,
.el-main,
.el-table__body-wrapper,
.el-dialog__body,
.el-table__body,
.el-table__header-wrapper,
.el-table__footer-wrapper,
.el-table__body,
.el-table__body-wrapper,
.el-table__fixed-body-wrapper,
.el-table__fixed-right-body-wrapper,
.el-table__fixed,
.el-table__fixed-right,
.el-table__body-wrapper,
.el-table__header,
.el-table__footer {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

/* Webkit 滚动条 */
body::-webkit-scrollbar,
.el-main::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.el-dialog__body::-webkit-scrollbar {
  width: 8px;
  background: var(--scrollbar-track);
}
body::-webkit-scrollbar-thumb,
.el-main::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-dialog__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
body::-webkit-scrollbar-corner,
.el-main::-webkit-scrollbar-corner,
.el-table__body-wrapper::-webkit-scrollbar-corner,
.el-dialog__body::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
</style>
